<template>
	<view class="project-details-page">
		<!-- 顶部导航栏 -->
		<view class="page-header">
			<view class="header-content">
				<text class="page-title">项目详情</text>
			</view>
		</view>

		<!-- 项目基本信息卡片 -->
		<view class="project-info-card">
			<view class="card-header">
				<view class="project-name">{{ cproject.csname || '项目名称' }}</view>
				<StatusBadge 
					:text="cproject.pstatus || '未知状态'" 
					:type="getStatusType(cproject.pstatus)"
				/>
			</view>
			<view class="project-time">
				<text class="time-label">创建时间</text>
				<text class="time-value">{{ cproject.inserttime || '--' }}</text>
			</view>
		</view>

		<!-- 项目详细信息 -->
		<view class="detail-sections">
			<!-- 基本信息 -->
			<view class="detail-section">
				<view class="section-title">
					<text class="title-icon">📋</text>
					<text class="title-text">基本信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="label">项目类型</text>
						<text class="value">{{ cproject.ptype || '--' }}</text>
					</view>
				<!-- 	<view class="info-item">
						<text class="label">管理类型</text>
						<text class="value">{{ cproject.mtype || '--' }}</text>
					</view> -->
					<view class="info-item">
						<text class="label">工程进度</text>
						<text class="value">{{ cproject.gprogress || '--' }}</text>
					</view>
					<view class="info-item">
						<text class="label">项目地址</text>
						<text class="value address">{{ cproject.paddress || '--' }}</text>
					</view>
				</view>
			</view>

			<!-- 责任人信息 -->
			<view class="detail-section">
				<view class="section-title">
					<text class="title-icon">👥</text>
					<text class="title-text">责任人信息</text>
				</view>
				<view class="contact-list">
					<view class="contact-item">
						<view class="contact-info">
							<text class="contact-role">工地负责人</text>
							<text class="contact-name">{{ cproject.cpman_login_uid || '--' }}</text>
						</view>
						<view v-if="cproject.cpman_mphone" class="phone-action" @click="makeCall(cproject.cpman_mphone)">
							<text class="phone-number">{{ cproject.cpman_mphone }}</text>
							<text class="call-icon">📞</text>
						</view>
					</view>
				<!-- 	<view class="contact-item">
						<view class="contact-info">
							<text class="contact-role">质量负责人</text>
							<text class="contact-name">{{ cproject.qmman_login_uid || '--' }}</text>
						</view>
						<view v-if="cproject.qmman_mphone" class="phone-action" @click="makeCall(cproject.qmman_mphone)">
							<text class="phone-number">{{ cproject.qmman_mphone }}</text>
							<text class="call-icon">📞</text>
						</view>
					</view> -->
				</view>
			</view>
			<!-- 单位信息 -->
			<view class="detail-section">
				<view class="section-title">
					<text class="title-icon">🏢</text>
					<text class="title-text">单位信息</text>
				</view>
				<view class="info-list" v-for="item in penterprise" :key="item.epid_val">
					<view class="info-item">
						<text class="label">所在企业</text>
						<text class="value">{{ item.epid || '--' }}</text>
					</view>
					<view class="info-item">
						<text class="label">单位类型</text>
						<text class="value">{{ item.etype || '--' }}</text>
					</view>
					<view class="info-item">
						<text class="label">项目负责人</text>
						<text class="value">{{ item.sid || '--' }}</text>
					</view>
					<view class="info-item">
						<text class="label">负责人电话</text>
						<text class="value">{{ item.mphone || '--' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="button-primary" @click="submitForm">
				<text class="button-text">📝 行政检查单</text>
			</view>
			<!-- <view v-if="userInfo.role && userInfo.role.name === '市场监督员'" class="button-secondary" @click="addCpatrol">
				<text class="button-text">➕ 新增巡查单</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import { request } from '@/request/index.js'
	import StatusBadge from '@/components/common/StatusBadge.vue'
	import { FLOW_NODES } from '@/constants/index.js'
	
	export default {
		name: 'ProjectDetails',
		components: {
			StatusBadge
		},
		data() {
			return {
				cproject: {},
				cprojectId: '',
				userInfo: {},
				isLoading: false,
				penterprise:[],
				penterpriseInfo:{}
			}
		},
		onLoad(option) {
			const userInfo = uni.getStorageSync('user')
			// if (!userInfo || userInfo === 'null' || userInfo === '') {
			// 	uni.showToast({
			// 		title: '请先登录',
			// 		success() {
			// 			uni.reLaunch({
			// 				url: '/pages/login/login'
			// 			})
			// 		}
			// 	})
			// 	return
			// }
			
			this.userInfo = userInfo
			this.cprojectId = option.cproject
			this.getProjectInfo(option.cproject)
		},
		onPullDownRefresh() {
			this.getProjectInfo(this.cprojectId)
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onShow() {
			// 刷新数据
			if (this.cprojectId) {
				this.getProjectInfo(this.cprojectId)
				this.getPenterprise(this.cprojectId)
			}
		},
		methods: {
			/**
			 * 获取项目信息
			 */
			async getProjectInfo(pid) {
				if (!pid) return
				
				try {
					this.isLoading = true
					uni.showLoading({ title: '加载中...' })
					
					const data = {
						query_cpid: pid,
						sort: 'updatetime',
						order: 'desc'
					}
					
					const response = await request({
						url: '/thirdGrid/query/c_cproject-m_cproject',
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'cookie': uni.getStorageSync('cookie')
						}
					})
					
					if (response.data.rows.length > 0) {
						const project = response.data.rows[0]
						this.cproject = {
							inserttime: project.inserttime,
							pstatus: project.pstatus,
							csname: project.csname,
							poverview: project.poverview,
							paddress: project.paddress,
							mccode: project.mccode,
							bccode: project.bccode,
							bcman: project.bcman,
							supervise: project.supervise,
							cpman_login_uid: project.cpman_login_uid,
							cpman_mphone: project.cpman_mphone,
							ptype: project.ptype,
							mtype: project.mtype,
							gprogress: project.gprogress,
							qmman_login_uid: project.qmman_login_uid,
							qmman_mphone: project.qmman_mphone
						}
					
					} else {
						uni.showToast({
							title: response.data.msg || '无法获取项目信息',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取项目信息失败:', error)
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
					uni.hideLoading()
				}
			},
			
			//获取企业信息
			async getPenterprise(epid){
				if (!epid) return
				
				try {
					this.isLoading = true
					uni.showLoading({ title: '加载中...' })
					
					const data = {
						query_cpid: epid,
						sort: 'updatetime',
						order: 'desc'
					}
					
					const response = await request({
						url: '/thirdGrid/query/c_penterprise-m_penterprise',
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'cookie': uni.getStorageSync('cookie')
						}
					})
					console.log(response)
					
					/* {
					success: true,
					message: "操作成功",
					total: 1,
					rows: [
							{
							cpid: "青山北湖流域再生水利用工程（一期）工程总承包（EPC）",
							cpid_val: "1000242",
							epid: "武汉青山流域水环境科技有限公司",
							epid_val: "1000482",
							etype: "建设单位",
							etype_val: "01",
							insertowner: "刘鸣",
							insertowner_val: "1352",
							inserttime: "2025-07-23 12:21:49",
							latitude: null,
							longitude: null,
							mphone: "18995656936",
							peid: 1000042,
							pk_val: "1000042",
							remark: null,
							rownum_: 1,
							sid: "黄宇",
							sid_val: "1000602",
							status: "正常",
							status_val: "1",
							updateowner: "",
							updateowner_val: "",
							updatetime: null
							}
						]
					} */
					
					
					if (response.data.rows.length > 0) {
						for(var i=0;i<response.data.rows.length;i++){
							const project = response.data.rows[i]
							this.penterpriseInfo = {
								epid: project.epid,
								etype: project.etype,
								csname: project.csname,
								sid: project.sid,
								mphone: project.mphone
							}
							this.penterprise.push(project)
						}
						
					} else {
						uni.showToast({
							title: response.data.msg || '无企业信息',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取项目信息失败:', error)
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
					uni.hideLoading()
				}
			},
			
			/**
			 * 获取状态类型
			 */
			getStatusType(status) {
				if (!status) return 'default'
				
				switch (status) {
					case '进行中':
					case '在建':
						return 'primary'
					case '已完成':
					case '已竞工':
						return 'success'
					case '暂停':
					case '暂缓':
						return 'warning'
					case '停工':
					case '退场':
						return 'error'
					default:
						return 'info'
				}
			},
			
			/**
			 * 拨打电话
			 */
			makeCall(phoneNumber) {
				if (!phoneNumber) return
				
				uni.showModal({
					title: '确认拨打',
					content: `是否拨打电话 ${phoneNumber}？`,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phoneNumber,
								fail: () => {
									uni.showToast({
										title: '拨打失败',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			
			/**
			 * 查看行政检查单
			 */
			submitForm() {
				if (!this.cprojectId) {
					uni.showToast({
						title: '项目信息不存在',
						icon: 'none'
					})
					return
				}
				
				uni.navigateTo({
					url: `/pages/cpatrol2/cpatrol2?cprojectId=${this.cprojectId}`
				})
			},
			
			/**
			 * 新增巡查单
			 */
			addCpatrol() {
				if (!this.cprojectId) {
					uni.showToast({
						title: '项目信息不存在',
						icon: 'none'
					})
					return
				}
				
				uni.redirectTo({
					url: `/pages/add_cipdetail/add_cipdetail?cprojectId=${this.cprojectId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.project-details-page {
	min-height: 100vh;
	padding: $spacing-lg;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

// 页面头部
.page-header {
	margin-bottom: $spacing-lg;
	
	.header-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: $spacing-md 0;
	}
	
	.page-title {
		font-size: $font-size-xl;
		font-weight: 600;
		color: $text-white;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
}

// 项目信息卡片
.project-info-card {
	background: $white;
	border-radius: $border-radius-lg;
	padding: $spacing-xl;
	margin-bottom: $spacing-lg;
	box-shadow: $shadow-lg;
	
	.card-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: $spacing-lg;
		gap: $spacing-md;
	}
	
	.project-name {
		flex: 1;
		font-size: $font-size-xl;
		font-weight: 600;
		color: $text-primary;
		line-height: 1.4;
		word-break: break-all;
	}
	
	.project-time {
		display: flex;
		align-items: center;
		gap: $spacing-sm;
		padding-top: $spacing-sm;
		border-top: 1px solid $border-color;
		
		.time-label {
			font-size: $font-size-sm;
			color: $text-secondary;
		}
		
		.time-value {
			font-size: $font-size-sm;
			color: $text-primary;
			font-weight: 500;
		}
	}
}

// 详细信息区域
.detail-sections {
	display: flex;
	flex-direction: column;
	gap: $spacing-lg;
	margin-bottom: $spacing-xl;
}

.detail-section {
	background: $white;
	border-radius: $border-radius-lg;
	padding: $spacing-xl;
	box-shadow: $shadow-md;
	
	.section-title {
		display: flex;
		align-items: center;
		gap: $spacing-sm;
		margin-bottom: $spacing-lg;
		padding-bottom: $spacing-md;
		border-bottom: 2px solid $primary-color;
		
		.title-icon {
			font-size: $font-size-lg;
		}
		
		.title-text {
			font-size: $font-size-lg;
			font-weight: 600;
			color: $text-primary;
		}
	}
}

// 信息列表
.info-list {
	display: flex;
	flex-direction: column;
	gap: $spacing-md;
}

.info-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: $spacing-md;
	background: $gray-50;
	border-radius: $border-radius-base;
	gap: $spacing-md;
	transition: all 0.3s ease;
	
	&:hover {
		background: lighten($primary-color, 45%);
		transform: translateX(4rpx);
	}
	
	.label {
		font-size: $font-size-base;
		color: $text-secondary;
		font-weight: 500;
		min-width: 140rpx;
		flex-shrink: 0;
	}
	
	.value {
		flex: 1;
		font-size: $font-size-base;
		color: $text-primary;
		font-weight: 500;
		text-align: right;
		word-break: break-all;
		
		&.address {
			line-height: 1.5;
		}
	}
}

// 联系人列表
.contact-list {
	display: flex;
	flex-direction: column;
	gap: $spacing-lg;
}

.contact-item {
	display: flex;
	flex-direction: column;
	gap: $spacing-sm;
	padding: $spacing-lg;
	background: linear-gradient(135deg, lighten($primary-color, 47%) 0%, lighten($primary-color, 45%) 100%);
	border-radius: $border-radius-lg;
	border-left: 4px solid $primary-color;
	transition: all 0.3s ease;
	
	&:hover {
		transform: translateY(-2rpx);
		box-shadow: $shadow-md;
	}
	
	.contact-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: $spacing-md;
		
		.contact-role {
			font-size: $font-size-sm;
			color: $text-secondary;
			font-weight: 500;
		}
		
		.contact-name {
			font-size: $font-size-base;
			color: $text-primary;
			font-weight: 600;
		}
	}
	
	.phone-action {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $spacing-sm $spacing-md;
		background: rgba(255, 255, 255, 0.8);
		border-radius: $border-radius-base;
		cursor: pointer;
		transition: all 0.3s ease;
		
		&:active {
			background: rgba(255, 255, 255, 0.6);
			transform: scale(0.98);
		}
		
		.phone-number {
			font-size: $font-size-base;
			color: $primary-color;
			font-weight: 600;
		}
		
		.call-icon {
			font-size: $font-size-lg;
			color: $success-color;
		}
	}
}

// 操作按钮
.action-buttons {
	display: flex;
	flex-direction: column;
	gap: $spacing-md;
	padding-bottom: $spacing-xl;
}

.button-primary,
.button-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: $spacing-lg $spacing-xl;
	border-radius: $border-radius-lg;
	font-weight: 600;
	box-shadow: $shadow-md;
	transition: all 0.3s ease;
	cursor: pointer;
	
	&:active {
		transform: translateY(2rpx);
		box-shadow: $shadow-sm;
	}
	
	.button-text {
		font-size: $font-size-base;
		font-weight: 600;
	}
}

.button-primary {
	background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 10%) 100%);
	color: $text-white;
	
	&:hover {
		background: linear-gradient(135deg, darken($primary-color, 5%) 0%, darken($primary-color, 15%) 100%);
	}
	
	.button-text {
		color: $text-white;
	}
}

.button-secondary {
	background: $white;
	color: $primary-color;
	border: 2px solid $primary-color;
	
	&:hover {
		background: lighten($primary-color, 47%);
	}
	
	.button-text {
		color: $primary-color;
	}
}

// 响应式设计
@media (max-width: 750rpx) {
	.project-details-page {
		padding: $spacing-md;
	}
	
	.project-info-card,
	.detail-section {
		padding: $spacing-lg;
	}
	
	.project-name {
		font-size: $font-size-lg;
	}
	
	.contact-item {
		padding: $spacing-md;
	}
	
	.info-item {
		flex-direction: column;
		align-items: flex-start;
		gap: $spacing-xs;
		
		.value {
			text-align: left;
		}
	}
}
</style>